<template>
  <div class="organizationSetting">
    <el-card>
      <el-col>
        <el-form ref="formData" :inline="true" :model="formData" label-width="100px" size="small" class="searchLine">
          <el-form-item label="单位名称">
            <el-select class="searchItemWidth" v-model="formData.companyCode" placeholder="请选择单位" clearable filterable>
            </el-select>
          </el-form-item>
          <el-form-item label="单位编码">
            <el-select class="searchItemWidth" v-model="formData.companyCode" placeholder="请选择单位编码" clearable filterable>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col  style="margin-bottom:10px;">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="addNewOrg">新增组织信息</el-button>
        <el-button type="danger" size="small">删除</el-button>
        <el-button size="small" style="float:right;">重置</el-button>
        <el-button type="primary" icon="el-icon-search" size="small"style="float:right;">查询</el-button>
      </el-col>
    </el-card>
    <el-table
     :data="tableData"
     size="small"
     tooltip-effect="dark"
     ref="table"
     :stripe="true"
     :border="true"
     style="width: 100%; margin-top:10px; border-radius:10px;"
     v-loading="loading"
     @selection-change="handleSelectionChange"
     max-height="550">
     <el-table-column
      type="selection"
      :resizable="false"
      width="55">
    </el-table-column>
     <el-table-column
       label="单位编码"
       prop="inspectDay"
       :resizable="false"
       width="200"
       >
     </el-table-column>
     <el-table-column
       label="单位名称"
       :resizable="false"
       prop="inspectTaskCode"
       width="200"
       show-overflow-tooltip
       >
     </el-table-column>
     <el-table-column
       prop="oriFileName"
       show-overflow-tooltip
       :resizable="false"
       width="200"
       label="单位级别">
     </el-table-column>
     <el-table-column
       prop="diagModelName"
       show-overflow-tooltip
       :resizable="false"
       width="200"
       label="上级单位编码">
     </el-table-column>
     <el-table-column
       prop="diagDay"
       show-overflow-tooltip
       :resizable="false"
       width="200"
       label="上级单位名称">
     </el-table-column>
     <el-table-column
       show-overflow-tooltip
       width="120"
       :resizable="false"
       label="单位地址">
     </el-table-column>
     <el-table-column
       prop="picNum"
       show-overflow-tooltip
       :resizable="false"
       label="单位负责人">
     </el-table-column>
     <el-table-column
       prop="defectivePicNum"
       width="120"
       :resizable="false"
       show-overflow-tooltip
       label="备注">
     </el-table-column>
    </el-table>
    <el-row class='pagination'>
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-row>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px" @close="cancelSubmit">
      <el-form :model="newForm" ref="newStation" :rules="rules" label-width="100px" style="padding-left:50px;">
        <el-form-item label="单位编码:" prop="companyCode">
          <el-select  style="width:250px;" size="small" v-model="newForm.companyCode" placeholder="请选择单位编码" clearable filterable>
          </el-select>
        </el-form-item>
        <el-form-item label="单位名称:" prop="companyName">
          <el-select  style="width:250px;" size="small" v-model="newForm.companyName" placeholder="请选择单位名称" clearable filterable>
          </el-select>
        </el-form-item>
        <el-form-item label="单位级别:" prop="companyLevel">
          <el-select  style="width:250px;" size="small" v-model="newForm.companyLevel" placeholder="请选择单位级别" clearable filterable>
          </el-select>
        </el-form-item>
        <el-form-item label="上级单位名称:" prop="parentCompany">
          <el-select  style="width:250px;" size="small" v-model="newForm.companyLevel" placeholder="请选择上级单位名称" clearable filterable>
          </el-select>
        </el-form-item>
        <el-form-item label="上级单位编码:" prop="parentCompanyCode">
          <el-select  style="width:250px;" size="small" v-model="newForm.parentCompanyCode" placeholder="请选择上级单位编码" clearable filterable>
          </el-select>
        </el-form-item>
        <el-form-item label="单位地址:"  prop="address">
          <el-input v-model="newForm.address" size="small" placeholder="请输入单位地址" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="单位负责人:"  prop="admin">
          <el-input v-model="newForm.admin" size="small" placeholder="请输入单位负责人" style="width:250px;"/>
        </el-form-item>
        <el-form-item label="备注:" prop="describeInfo">
          <el-input
            type="textarea"
            size="small"
            style="width:250px;"
            :rows="2"
            placeholder="请输入描述信息"
            v-model="newForm.describeInfo">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button type="primary" @click="addSubmit" size="small">确 定</el-button>
        <el-button @click="cancelSubmit" size="small">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'organizationSetting',
    data: () => ({
      formData: {},
      tableData: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogFormVisible: false,
      title: '新增组织信息',
      newForm: {
        companyCode: '',
        companyName: '',
        companyLevel: '',
        parentCompany: '',
        parentCompanyCode: '',
        address: '',
        admin: '',
        describeInfo: ''
      },
      selection: []
    }),
    methods: {
      addNewOrg() {
        this.dialogFormVisible = true
        this.title = '新增组织信息'
      },
      addSubmit() {},
      cancelSubmit() {
        this.dialogFormVisible = false
      },
      getList() {},
      handleSelectionChange(selection) {
        this.selection = selection
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
        this.getList()
      }
    }
  }
</script>
<style lang="scss" scoped>
.organizationSetting{
  padding: 10px 20px;
  .searchLine{
    .el-form-item{
      margin-bottom: 3px !important;
    }
  }
  .pagination{
    text-align: center;
    margin-top: 20px;
  }
}
</style>
